<template>
    <div class="userInfo">
        <div class="userInfoTop">
            <div class="avatar"><img :src="checkUserInfo()?.avatar" /></div>
            <div class="message">
                <div class="showName">{{ checkUserInfo()?.realname }}</div>
                <div class="nickName">
                    <div class="itemTitle">昵称：</div>
                    <div class="itemContent">{{ checkUserInfo()?.realname }}</div>
                </div>
                <div class="username">
                    <div class="itemTitle">账号：</div>
                    <div class="itemContent">{{ checkUserInfo()?.username }}</div>
                </div>
            </div>
        </div>
        <div class="dividingLine"></div>
        <div class="userInfoCenter">
            <div class="showInfo">
                <div class="itemTitle">备注</div>
                <div class="itemContent">陈俊杰</div>
            </div>
            <div class="showInfo">
                <div class="itemTitle">共同群聊</div>
                <div class="itemContent">17个</div>
            </div>
            <div class="showInfo">
                <div class="itemTitle">个性签名</div>
                <div class="itemContent">aaaaaaa</div>
            </div>
            <div class="showInfo">
                <div class="itemTitle">添加方式</div>
                <div class="itemContent">aaaaaaa</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import useUserStore from '@/store/modules/user'
import useMessagesStore from '@/store/modules/messages'
import type { userInfo } from '@/api/user/type'
import type { PropType } from 'vue'

//获取父组件传递过来的全部数据
let props = defineProps({
    showType: Number,
    showInfo: {
        type: Object as PropType<userInfo>,
        required: false,
    },
})
const userStore = useUserStore()
const messagesStore = useMessagesStore()

//根据传入组件的props判断显示的用户信息数据
const checkUserInfo = () => {
    // 用户在聊天页点击自己头像的信息
    if (props.showType === 0) {
        const userInfo: userInfo = {
            userId: userStore.userId,
            username: userStore.username,
            avatar: userStore.avatar,
            realname: userStore.realname,
            description: '',
        }
        return userInfo
    }
    // 正在聊天页面点击好友头像的信息
    if (props.showType === 1) {
        return messagesStore.chattingFriend
    }
    // 通讯录好友展示信息
    if (props.showType === 2) {
        return messagesStore.contactsFriend
    }
    // 查找用户信息
    if (props.showType === 3) {
        return props.showInfo
    }
}
</script>

<style scoped lang="scss">
.userInfo {
    width: 300px;
    height: auto;

    .userInfoTop {
        width: 300px;
        @include flex-layout();

        .avatar {
            width: 100px;
            height: 80px;

            img {
                width: 80px;
                height: 80px;
                border-radius: 0.5rem;
            }
        }

        .message {
            width: 200px;
            height: 80px;
            @include flex-layout(flex, normal, space-around, nowrap, column);

            .showName {
                font-size: 24px;
            }

            .nickName {
                color: rgb(153, 153, 153);
                @include flex-layout();
            }

            .username {
                color: rgb(153, 153, 153);
                @include flex-layout();
            }
        }
    }

    .userInfoCenter {
        width: 300px;

        .showInfo {
            padding: 0 20px;
            @include flex-layout(flex, center, space-between);
        }
    }

    .dividingLine {
        width: 300px;
        margin: 20px 0;
        border-top: 1px solid rgb(153, 153, 153);
    }
}

.itemTitle {
    color: rgb(153, 153, 153);
    width: 100px;
    height: 24px;
    line-height: 24px;
    cursor: default;
}

.itemContent {
    width: fit-content;
    height: 24px;
    line-height: 24px;
}
</style>
